<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    header {
      height: 160px;
      position: relative;
      overflow: hidden;
    }

    header>div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      --offset: 0px;
      --blur: 2px;
    }

    header>div>img {
      display: block;
      width: 110%;
      height: 100%;
      object-fit: cover;
      transform: translatex(var(--offset));
      filter: blur(var(--blur));
    }
  </style>
</head>

<body>
  <header>
    <div><img src="./images/bilibili-autumn-1.webp" alt=""></div>
    <div><img src="./images/bilibili-autumn-2.webp" alt=""></div>
    <div><img src="./images/bilibili-autumn-3.webp" alt=""></div>
    <div><img src="./images/bilibili-autumn-4.webp" alt=""></div>
    <div><img src="./images/bilibili-autumn-5.webp" alt=""></div>
    <div><img src="./images/bilibili-autumn-6.png" alt=""></div>
  </header>

  <script>
    const images = document.querySelectorAll('header > div > img')
    document.querySelector('header').addEventListener('mousemove', (e) => {
      let percentage = e.clientX / window.outerWidth
      let offset = 10 * percentage
      let blur = 20
      //这个公式是：1, 2, 3, 4, 5, 6，如果鼠标移到 3，那 2，4 模糊一点，1，5 再模糊一点，6 最模糊；如果鼠标移到 6，就 5 模糊一点，如此类推，1 最模糊
      for (let [index, image] of images.entries()) {
        offset *= 1.3
        let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)
        if (index === 3) {
          console.log(blurValue)
        }
        image.style.setProperty('--offset', `${offset}px`)
        image.style.setProperty('--blur', `${blurValue}px`)
      }
    })
  </script>
</body>

</html>